//header
@import "@/assets/scss/default/header.scss";
@import "@/assets/scss/default/nav.scss";
@import "@/assets/scss/default/login-dialog.scss";
@import "@/assets/scss/default/fixed-tool.scss";
@import "@/assets/scss/default/drawer-search.scss";


#main {
  padding-top: calc(#{$header-h} + #{$nav-h} + #{$main-top});

  //nav-children
  @import "@/assets/scss/category/category-nav-children";

  .content {
    position: relative;

    .left {
      width: 700px;
      border-radius: 2px;
      background-color: $white;
      margin-right: 260px;

      @media screen and (max-width:960px) {
        width: 100%;
        margin-right: 0;
      }

      // 快捷导航
      .category-title {
        padding: 16px 12px;
        border-bottom: 1px solid $border-color;

        .title {
          font-size: 14px;
          font-weight: normal;
          color: $text-color;

          strong {
            font-size: 18px;
            font-weight: bold;
            color: $primary;
          }
        }
      }

      //骨架屏
      @import "@/assets/scss/index/skeleton";

      // 文章列表
      #article-list-wrap {
        &.hide {
          height: 0;
          display: none;
          overflow: hidden;
        }

        @import "@/assets/scss/index/mini-article-card";
      }



      //自动加载
      @import "@/assets/scss/index/auto-load";
    }

    .right {
      position: absolute;
      top: 0;
      right: 0;
      width: 240px;

      @media screen and (max-width:960px) {
        display: none;
      }

      // 最近评论
      .recent-comment {
        background-color: $white;
        margin-bottom: 16px;
        box-shadow: 0 1px 2px 0 $box-shadow;

        .recent-head {
          padding: 12px 16px;
          font-size: 14px;
          line-height: 1;
          color: $title;
          display: flex;
          align-items: center;
          border-bottom: 1px solid $border-color;

          .icon {
            font-size: 12px;
            color: $icon-color;
            margin-right: 5px;
          }
        }

        .recent-body {
          .item {
            .link {
              display: flex;
              align-items: center;
              color: inherit;
              text-decoration: none;
              padding: 12px 16px;

              &:hover,
              &:active {
                background-color: darken($white, 2%);
              }
            }

            .comment-avatar {
              flex-shrink: 0;
              width: 45px;
              height: 45px;
              border-radius: 50%;
              overflow: hidden;
              margin-right: 6px;

              img {
                @include imgFit();
              }
            }

            .user-info {
              min-width: 0;
              flex-grow: 1;

              .title {
                font-size: 14px;
                font-weight: normal;
                color: $title;
                margin-bottom: 3px;
                @include nowrap();
              }

              .subtitle {
                font-size: 12px;
                color: $icon-color;
                word-wrap: break-word;
                @include nowrap();

                img {
                  width: 20px;
                  height: 20px;
                  vertical-align: sub;
                  margin-left: 4px;

                  &+img {
                    margin-right: 2px;
                  }
                }
              }
            }
          }
        }

        .recent-footer {
          padding: 12px 0;
          display: flex;
          justify-content: center;
          align-items: center;
          color: $primary;
          border-top: 1px solid $border-color;

          a {
            font-size: 14px;
            color: inherit;
            text-decoration: none;
          }

          .icon {
            font-size: 14px;
            margin-left: 5px;
          }
        }
      }

      // 主题小工具
      .theme-tool {
        background-color: $white;
        margin-bottom: 16px;
        box-shadow: 0 1px 2px 0 $box-shadow;

        .item {
          .link {
            color: inherit;
            text-decoration: none;
            display: flex;
            align-items: center;
            padding: 12px;

            &:hover,
            &:active {
              background-color: darken($white, 2%);
            }

            .tool-pic {
              flex-shrink: 0;
              width: 36px;
              height: 36px;
              margin-right: 10px;

              img {
                @include imgFit(contain);
              }
            }

            .title {
              min-width: 0;
              flex-grow: 1;
              font-size: 14px;
              font-weight: normal;
              color: $title;
              line-height: 1;
              @include nowrap();
            }
          }
        }
      }

      //footer
      @import "@/assets/scss/default/footer";

    }
  }

}